<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var dataRequestHeader= {};
  function initialize() {
    var latlng = new google.maps.LatLng(7.1000, 79.6500523);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(map, 'click', function(event) {
   
  	infoWindow.setContent("<form method='GET'>"+
  		  	"<input name='lat' id='lat' type='hidden' value='"+event.latLng.lat()+"'/><input name='lon' id='lon' type='hidden' value='"+event.latLng.lng()+"'/><input name='route' id='route' type='text' value='routes'/></br><input name='busStop' id='busStop' type='text' value='Bus stop'/><input name='send' type='submit' onclick='ajaxFunction();'></form>"); //<div id='div-regForm'><form id='regForm' method='get'><table><tbody><tr><td><label for='name'> Name:</label></td><td><div class='input-container'><input name='namei' id='namei' type='text' /></div></td></tr><tr><td><label for='lname'>Description:</label></td><td><div class='input-container'><textarea rows='5' cols='30' id='desc'> </textarea></div></td> </tr> <tr><td><label for='name'> URL:</label></td><td><div class='input-container'><input name='urll' id='urll' type='text' /></div></td></tr> <tr>    <td><label for='locationtype'>Location Type:</label></td>    <td>    <div class='input-container'>    <select name='locationtype' id='cat'>    <option value='0'>Ancient_place</option>    <option value='1'>Beach</option>    <option value='2'>Cultural</option>	<option value='3'>Hotel</option>	<option value='4'>Police Station</option>	<option value='5'>Railway Station</option>    </select>  </tr><tr>  <td>&nbsp;</td>  <td><input type='button' class='greenButton' value='add data' onclick='insert()' /><img id='loading' src='img/ajax-loader.gif' alt='working..' /></td>  </tr> </tbody></table></form></div>
   infoWindow.setPosition(event.latLng);
     infoWindow.open(map);
   });
   
  }

  function getXMLObject()  //XML OBJECT
  {
     var xmlHttp = false;
     try {
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
     }
     catch (e) {
       try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
       }
       catch (e2) {
         xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
       }
     }
     if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
       xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
     }
     return xmlHttp;  // Mandatory Statement returning the ajax object created
  }
   
  var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
   
  function ajaxFunction() {
    if(xmlhttp) { 
     var route = document.getElementById("route");
     var lat = document.getElementById("lat");
     var lon = document.getElementById("lon");
     var busStop = document.getElementById("busStop");
     var url = "tourdelanka?lat=" + lat.value + "&lng=" + lon.value + "&route=" + route.value+ "&busStop=" + busStop.value; 
alert(url);
     xmlhttp.open("GET",url,true); //tourdelanka will be the servlet name
      //xmlhttp.onreadystatechange  = handleServerResponse;
      //xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlhttp.send(null); 
    }
  }
   
  function handleServerResponse() {
	  //alert(xmlhttp.readyState+" "+xmlhttp.status);
     if (xmlhttp.readyState == 4) {
       if(xmlhttp.status == 200) {
           alert(xmlhttp.responseText);
         //document.myForm.message.innerHTML=xmlhttp.responseText; //Update the HTML Form element 
       }
       else {
          alert("Error during AJAX call. Please try again");
       }
     }
  }
  </script>
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
